<template>
  <view>
    <cu-cell
      :title="label"
      :required="required"
      link
      :placeholder="placeholder"
      @click="open"
      :description="description"
    ></cu-cell>
    <uni-drawer ref="userDrawer" mode="right" :mask-click="true" :width="330">
      <CuMultipleUserSelector
        :deptId="deptId"
        :multiple="multiple"
        @change="selectChangeHandler"
        :checkList="modelValue"
        :excludeIds="excludeIds"
      />
    </uni-drawer>
  </view>
</template>

<script>
import CuMultipleUserSelector from '@/components/cu-multiple-user-selector/index.vue'

import { listUser, getStaffQuery } from '@/api/system/user.js'
export default {
  name: 'UserSelector',
  components: {
    CuMultipleUserSelector
  },
  model: {
    prop: 'value',
    event: 'update:value'
  },
  props: {
    value: {
      type: [Number, Array, String]
    },
    placeholder: String,
    label: String,
    title: String,
    multiple: {
      type: Boolean,
      default: false
    },
    required: {
      type: Boolean,
      default: false
    },
    deptId: {
      type: [Number, String],
      default: ''
    },
    // 排除的用户ID
    excludeIds: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      searchKey: '',
      listData: [],
      currentSelectUser: [],
      modelValue: undefined
    }
  },
  methods: {
    selectChangeHandler(data) {
      this.modelValue = []
      if (data.length > 0) {
        data.map((item) => {
          this.userClick(item)
        })
      } else {
        this.$emit('update:value', [])
      }
      this.$refs.userDrawer.close()
    },
    showDescription() {
      if (this.multiple) {
        this.currentSelectUser = [...this.modelValue.map((i) => i.name)]
      }
    },
    open() {
      this.listData = []
      this.searchKey = ''
      this.$refs.userDrawer.open()
      // this.onSearch()
    },
    userClick(data) {
      if (this.multiple) {
        const ids = this.modelValue.map((item) => Number(item.userId))
        if (ids.includes(data.userId)) {
          this.modelValue = this.modelValue.filter((item) => item.userId != data.userId)
        } else {
          this.modelValue = [
            ...this.modelValue,
            {
              userId: data.userId,
              name: data.name
            }
          ]
        }
        this.currentSelectUser = [...this.modelValue.map((i) => i.name)]
      } else {
        this.modelValue = data.userId
        if (this.currentSelectUser.includes(Number(this.modelValue))) return
        this.currentSelectUser = [data.name]
      }
      this.$emit('update:value', this.modelValue)
      this.handleCancel()
    },
    ontReset() {
      this.searchKey = ''
      this.listData = []
      this.onSearch()
    },
    onSearch() {
      const data = {
        deptId: this.deptId,
        keyword: this.searchKey
      }
      listUser(data).then((res) => {
        if (this.excludeIds.length > 0) {
          let arr = []
          for (var i = 0; i < res.rows.length; i++) {
            if (this.excludeIds.indexOf(res.rows[i].userId) == -1) {
              arr.push(res.rows[i])
            }
          }
          this.listData = arr
        } else {
          this.listData = res.rows
        }
      })
    },
    //type 1 单选  2多选
    handleCancel() {
      if (!this.multiple) this.$refs.userDrawer.close()
    }
  },
  computed: {
    description() {
      return this.currentSelectUser.join(',')
    },
    isActive() {
      return function (data) {
        if (this.multiple) {
          return this.modelValue.map((item) => Number(item.userId)).includes(data.userId)
        }
        return data.userId == this.modelValue
      }
    }
  },
  watch: {
    value: {
      async handler(val) {
        if (val == this.modelValue) return

        if (typeof val == 'number' || typeof +val === 'number') {
          const res = await getStaffQuery(val)
          this.modelValue = res.data.staffId
          this.currentSelectUser = [res.data.staffName]
        } else {
          if (this.multiple) {
            this.currentSelectUser = val.map((item) => item.name)
            this.modelValue = val
          } else {
            this.modelValue = val
            this.currentSelectUser = [val]
          }
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style lang="scss" scoped>
.example-body {
  padding: 10px;
}

.scroll-view {
  /* #ifdef H5 */
  padding-top: 88rpx;
  /* #endif */
  /* #ifndef APP-NVUE */
  width: 100%;
  height: 100%;
  /* #endif */
  flex: 1;
}

// 处理抽屉内容滚动
.scroll-view-box {
  flex: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(100vh - 150rpx - var(--status-bar-height) - constant(safe-area-inset-top));
  height: calc(100vh - 150rpx - var(--status-bar-height) - env(safe-area-inset-top));
  /* #ifdef H5 */
  height: calc(100vh - 238rpx - var(--status-bar-height) - env(safe-area-inset-top));
  /* #endif */
}

.info {
  padding: 15px;
  color: #666;
}

.info-text {
  font-size: 14px;
  color: #666;
}

.info-content {
  padding: 5px 15px;
}

.close {
  padding: 10px;
}

.rawer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40rpx;
  width: 100%;
}

.drawer-img {
  width: 40rpx;
  height: 40rpx;
}
</style>
